<template>
	<view>
		<view class="cu-bar bg-white">
			<view class="action">
				<navigator open-type="navigateBack">
					<text class="cuIcon-back text-gray"></text> 返回
				</navigator>
			</view>
			<view class="content text-bold">
				会员权限
			</view>
		</view>
		<!-- 会员详情 -->
		<view class="swiper-tab dibetween bg-white">
			<view class="swiper-tab-item " :class="currentTab==0?'de_active':''" data-current="0" @tap="clickTab">无会员
			</view>
			<view class="swiper-tab-item " :class="currentTab==1?'de_active':''" data-current="1" @tap="clickTab">小会员
			</view>
			<view class="swiper-tab-item " :class="currentTab==2?'de_active':''" data-current="2" @tap="clickTab">大会员
			</view>
		</view>
		<swiper :current="currentTab" duration="300" @change="swiperTab" class="changVip">
			<swiper-item>
				<view class="bg-img bg-mask flex align-center"
					style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
					<view class="padding-xl text-white">
						<view class="padding-xs text-xxl text-bold">
							无会员
						</view>
						<view class="padding-xs text-lg">
							Only the guilty need fear me.
						</view>
					</view>
				</view>
				<view class="cu-list grid col-3 no-border" >
					<view class="cu-item" v-for="(item,index) in cuIconList.slice(0,4)" :key="index" >
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="padding-xl radius shadow-blur bg-red margin-top bg-img text-center" @tap="showCartList = 'showCartLists'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
					<view>{{this.currentTab == 0 ? '免费成为会员':'您已是会员'}}</view>
				</view>
				<view class="cu-modal" :class="showCartList=='showCartLists'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">提示</view>
							<view class="action" @tap="hideModal">
								<text class="cuIcon-close text-red"></text>
							</view>
						</view>
						<!-- 配料选择区 -->
						<view class="padding-xl">{{this.currentTab == 0 ? '请确认成为会员':'您已是会员'}}</view>
						<view class="cu-bar bg-white justify-end">
							<view class="action">
								<button class="cu-btn bg-white margin-left" @tap="showCartList = null">取消</button>
								<button class="cu-btn bg-green margin-left" @tap="Bmember">确定</button>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="bg-img bg-mask flex align-center"
					style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 414upx;">
					<view class="padding-xl text-white">
						<view class="padding-xs text-xxl text-bold">
							小会员
						</view>
						<view class="padding-xs text-lg">
							Only the guilty need fear me.
						</view>
					</view>
				</view>
				<view class="cu-list grid col-3 no-border" >
					<view class="cu-item" v-for="(item,index) in cuIconList.slice(0,6)" :key="index" >
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="bg-img bg-mask flex align-center"
					style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10003.jpg');height: 414upx;">
					<view class="padding-xl text-white">
						<view class="padding-xs text-xxl text-bold">
							大会员
						</view>
						<view class="padding-xs text-lg">
							Only the guilty need fear me.
						</view>
					</view>
				</view>
				<view class="cu-list grid col-3 no-border" >
					<view class="cu-item" v-for="(item,index) in cuIconList.slice(0,8)" :key="index" >
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import cuIconList from "../../static/js/Cart.json"
	export default {

		data() {
			return {
				currentTab: 1,
				cuIconList: [],
				showCartList:null
			}
		},
		computed: {

		},
		onLoad() {
			this.cuIconList = cuIconList.cuIconList
		},
		methods: {
			// 修改swiper状态
			clickTab(e) {
				if (this.currentTab === e.target.dataset.current) {
					return false;
				} else {
					this.currentTab = e.target.dataset.current
				}
			},
			// 修改swiper状态
			swiperTab(e) {
				this.currentTab = e.detail.current
			},
			// 成为会员
			Bmember(e){
				this.showCartList = null
				this.currentTab = 0
			}
		},
		mounted() {
			//获取手机信息
			uni.getSystemInfo({
				success: function(res) {
					console.log("getSystemInfo", res)
				}
			});

		}
	}
</script>

<style lang="less">
	@import url("@/static/css/components.less");

	.tabTop {
		padding: 15rpx 10rpx;

		text {
			padding-bottom: 10rpx;
		}
	}

	.changVip {
		min-height: 1000rpx !important;
	}

	.detaIcon {
		flex-wrap: wrap;

		.detaList {
			text-align: center;
			width: 24%;
			padding: 20rpx 5rpx;
		}
	}

	.swiper-tab .swiper-tab-item {
		padding: 8rpx 15rpx;
		margin: 10rpx auto;
	}
	.de_active{
		border-bottom: 4rpx solid #dfca25;
	}
</style>
